﻿@page "/components/card"

<PageOutlet Url="components/card"
            Title="Card"
            Description="card component of the bit BlazorUI components" />

<DemoPage Name="Card"
          Description="A Card provides a container to wrap around a specific content. Keeping a card to a single subject keeps the design clean."
          Parameters="componentParameters"
          SubEnums="componentSubEnums"
          GitHubUrl="Surfaces/Card/BitCard.razor"
          GitHubDemoUrl="Surfaces/Card/BitCardDemo.razor">
    <DemoExample Title="Basic" RazorCode="@example1RazorCode" Id="example1">
        <BitCard>
            <BitStack HorizontalAlign="BitAlignment.Start">
                <BitText Typography="BitTypography.H4">bit BlazorUI</BitText>
                <BitText Typography="BitTypography.Body1">
                    bit BlazorUI components are native, easy-to-customize, and ...
                </BitText>
                <BitLink Href="https://blazorui.bitplatform.dev" Target="_blank">Learn more</BitLink>
            </BitStack>
        </BitCard>
    </DemoExample>

    <DemoExample Title="NoShadow" RazorCode="@example2RazorCode" Id="example2">
        <BitCard NoShadow>
            <BitStack HorizontalAlign="BitAlignment.Start">
                <BitText Typography="BitTypography.H4">bit BlazorUI</BitText>
                <BitText Typography="BitTypography.Body1">
                    bit BlazorUI components are native, easy-to-customize, and ...
                </BitText>
                <BitLink Href="https://blazorui.bitplatform.dev" Target="_blank">Learn more</BitLink>
            </BitStack>
        </BitCard>
    </DemoExample>

    <DemoExample Title="Background" RazorCode="@example3RazorCode" CSharpCode="@example3CSharpCode" Id="example3">
        <BitChoiceGroup @bind-Value="backgroundColorKind" Horizontal
                        TItem="BitChoiceGroupOption<BitColorKind>" TValue="BitColorKind">
            <BitChoiceGroupOption Text="Primary" Value="BitColorKind.Primary" />
            <BitChoiceGroupOption Text="Secondary" Value="BitColorKind.Secondary" />
            <BitChoiceGroupOption Text="Tertiary" Value="BitColorKind.Tertiary" />
            <BitChoiceGroupOption Text="Transparent" Value="BitColorKind.Transparent" />
        </BitChoiceGroup>
        <br />
        <div style="padding:2rem;background:gray">
            <BitCard Background="backgroundColorKind">
                <BitStack HorizontalAlign="BitAlignment.Start">
                    <BitText Typography="BitTypography.H4">bit BlazorUI</BitText>
                    <BitText Typography="BitTypography.Body1">
                        bit BlazorUI components are native, easy-to-customize, and ...
                    </BitText>
                    <BitLink Href="https://blazorui.bitplatform.dev" Target="_blank">Learn more</BitLink>
                </BitStack>
            </BitCard>
        </div>
    </DemoExample>

    <DemoExample Title="Border" RazorCode="@example4RazorCode" CSharpCode="@example4CSharpCode" Id="example4">
        <BitChoiceGroup @bind-Value="borderColorKind" Horizontal
                        TItem="BitChoiceGroupOption<BitColorKind>" TValue="BitColorKind">
            <BitChoiceGroupOption Text="Primary" Value="BitColorKind.Primary" />
            <BitChoiceGroupOption Text="Secondary" Value="BitColorKind.Secondary" />
            <BitChoiceGroupOption Text="Tertiary" Value="BitColorKind.Tertiary" />
            <BitChoiceGroupOption Text="Transparent" Value="BitColorKind.Transparent" />
        </BitChoiceGroup>
        <br />
        <BitCard Border="borderColorKind">
            <BitStack HorizontalAlign="BitAlignment.Start">
                <BitText Typography="BitTypography.H4">bit BlazorUI</BitText>
                <BitText Typography="BitTypography.Body1">
                    bit BlazorUI components are native, easy-to-customize, and ...
                </BitText>
                <BitLink Href="https://blazorui.bitplatform.dev" Target="_blank">Learn more</BitLink>
            </BitStack>
        </BitCard>
    </DemoExample>

    <DemoExample Title="FullSize" RazorCode="@example5RazorCode" CSharpCode="@example5CSharpCode" Id="example5">
        <BitChoiceGroup @bind-Value="size" Horizontal
                        TItem="BitChoiceGroupOption<int>" TValue="int">
            <BitChoiceGroupOption Text="FullSize" Value="0" />
            <BitChoiceGroupOption Text="FullWidth" Value="1" />
            <BitChoiceGroupOption Text="FullHeight" Value="2" />
        </BitChoiceGroup>
        <br />
        <div style="padding:2rem;background:gray;height:500px">
            <BitCard FullSize="size==0" FullWidth="size==1" FullHeight="size==2">
                <BitStack HorizontalAlign="BitAlignment.Start">
                    <BitText Typography="BitTypography.H4">bit BlazorUI</BitText>
                    <BitText Typography="BitTypography.Body1">
                        bit BlazorUI components are native, easy-to-customize, and ...
                    </BitText>
                    <BitLink Href="https://blazorui.bitplatform.dev" Target="_blank">Learn more</BitLink>
                </BitStack>
            </BitCard>
        </div>
    </DemoExample>
</DemoPage>
